/**
 * Created by hao.cheng on 2017/4/13.
 */
import React, { Component } from 'react';
import { Menu, Icon, Layout, Popover } from 'antd';
import screenfull from 'screenfull';
import { bindActionCreators } from "redux";
import SiderCustom from './SiderCustom';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';
import { fetchData } from "@/action";
import { avater } from "../api/user";
const { Header } = Layout;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;


class HeaderCustom extends Component {
  state = {
    user: '',
    visible: false,
  };
  async componentDidMount() {
    // const _user = await http.gitOauthToken();
    // if (!_user) {
    //   this.props.history.push('/login')
    // } else {
    //   this.setState({
    //     user: _user
    //   });
    // }
  };
  screenFull = () => {
    if (screenfull.enabled) {
      screenfull.request();
    }

  };
  menuClick = e => {
    e.key === 'logout' && this.logout();
  };
  logout = () => {
    const { fetchData } = this.props;
    localStorage.removeItem('user');
    fetchData({
      funcName: 'logout'
    }).then(() => {
      this.props.history.push('/login')
    })
  };
  popoverHide = () => {
    this.setState({
      visible: false,
    });
  };
  handleVisibleChange = (visible) => {
    this.setState({ visible });
  };
  render() {
    const { responsive, path } = this.props;
    return (
      <Header style={{ background: '#fff', padding: 0, height: 65 }} className="custom-theme" >
        {
          responsive.data.isMobile ? (
            <Popover content={<SiderCustom path={path} popoverHide={this.popoverHide} />} trigger="click" placement="bottomLeft" visible={this.state.visible} onVisibleChange={this.handleVisibleChange}>
              <Icon type="bars" className="trigger custom-trigger" />
            </Popover>
          ) : (
              <Icon
                className="trigger custom-trigger"
                type={this.props.collapsed ? 'menu-unfold' : 'menu-fold'}
                onClick={this.props.toggle}
              />
            )
        }
        <Menu
          mode="horizontal"
          style={{ lineHeight: '64px', float: 'right' }}
          onClick={this.menuClick}
        >
          <Menu.Item key="full" onClick={this.screenFull} >
            <Icon type="arrows-alt" onClick={this.screenFull} />
          </Menu.Item>
          <SubMenu title={<span className="avatar"><img src={avater} alt="头像" /><i className="on bottom b-white" /></span>}>
            <MenuItemGroup title="用户中心">
              <Menu.Item key="setting:1">你好 - {this.props.user.username}</Menu.Item>
              <Menu.Item key="logout"><span>退出登录</span></Menu.Item>
            </MenuItemGroup>
          </SubMenu>
        </Menu>
        <style>{`
                    .ant-menu-submenu-horizontal > .ant-menu {
                        width: 120px;
                        left: -40px;
                    }
                `}</style>
      </Header>
    )
  }
}

const mapStateToProps = state => {
  const { responsive = { data: {} } } = state.httpData;
  return { responsive };
};

const mapDispatchToProps = dispatch => ({
  fetchData: bindActionCreators(fetchData, dispatch)
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(HeaderCustom));
